<template>
  <div>
    <van-notice-bar color="#ef7722" background="#fffbe8" left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>欢迎来到LeDao商城</van-swipe-item>
        <van-swipe-item>内容 2</van-swipe-item>
        <van-swipe-item>内容 3</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-swipe :autoplay="5000">
      <van-swipe-item v-for="(image, index) in SwiperImg" :key="index">
        <img :src="image" style="width: 100%">
      </van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item icon="apps-o" to="/allType" text="商品分类"/>
      <van-grid-item icon="new-o" to="/newProduct" text="新品上市"/>
      <van-grid-item icon="hot-sale-o" to="/hotProduct" text="热卖商品"/>
      <van-grid-item icon="discount" to="/discountProduct" text="折扣商品"/>
    </van-grid>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      thumb-link="/#/productDetails"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
    </van-card>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      thumb-link="/#/productDetails"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
    </van-card>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      thumb-link="/#/productDetails"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
    </van-card>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      thumb-link="/#/productDetails"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
    </van-card>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      thumb-link="/#/productDetails"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
    </van-card>
    <van-tabbar v-model="active" :border="false" :safe-area-inset-bottom="true">
      <van-tabbar-item name="home" icon="wap-home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item name="search" icon="search" to="/search">搜索</van-tabbar-item>
      <van-tabbar-item name="shoppingCart" icon="shopping-cart-o" to="/shoppingCart">购物车</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o" to="/settings">设置</van-tabbar-item>
    </van-tabbar>
    <!--为了让最后一个商品不被遮挡-->
    <div>
      <p style="color: white">1</p>
      <p style="color: white">1</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      SwiperImg: [
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/1.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/2.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/3.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/4.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/5.jpg"
      ],
      active: 'home',
    }
  }
}
</script>

<style scoped>

</style>
